<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>美食派系统-商品类目列表</title>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="media/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="media/js/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>





    <style type="text/css">
        /* .laytable-cell-1-heading {
            height: 60px !important;
            width: 80px !important;

        } */
        .layui-table img {
            height: 100%;
            max-width: 100%;
        }
    </style>
    <script src="media/js/jquery.min.js"></script>
</head>
<body>
<div class="layui-container">
    <table id="tbdata" lay-filter="tbop">

    </table>

</div>

<script src="media/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            id: 'did',
            elem: '#tbdata',
            url: 'meishipai/product-category/list' //数据接口
            ,
            page: true //开启分页
            ,
            minWidth: 20,
            size: 'lg',
            cols: [[ //表头
                {type: 'checkbox'},
                {
                    field: 'categoryId',
                    align: 'center',
                    title: 'id',
                    sort: true,
                    //fixed : 'left'
                }, {
                    field: 'categoryName',
                    align: 'center',
                    title: '类目名字'
                }, {
                    field: 'categoryType',
                    align: 'center',
                    title: '类目编号'
                }, {
                    field: 'createTime',
                    align: 'center',
                    title: '创建'
                }, {
                    field: 'updateTime',
                    align: 'center',
                    title: '更新日期'
                }, {
                    field: 'right',
                    title: '操作',
                    align: 'center',
                    toolbar: "#barDemo",
                    fixed: 'right',
                    width: 200
                }]]
        });

        //监听工具条
        table.on('tool(tbop)', function (obj) {
            var data = obj.data;
            console.log(obj.data.categoryId)
            if(obj.event === 'edit') {
                $("#categoryId").attr('value', data.categoryId);
            }else if(obj.event === 'detail'){
                layer.alert('商品类目id :      ' + data.categoryId + '<br> 类目名字: ' + data.categoryName + '<br> 类目编号: ' +
                    data.categoryType + '<br> 创建日期:      ' + data.createTime + '<br> 更新日期: ' + data.updateTime );
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么' +data.categoryId, function(index){
                    layui.$.ajax({
                        type:'get',
                        url:'meishipai/product-category/delete?categoryId='+data.categoryId,
                        dataType:'json',
                        success:function (data) {
                            if (data.code == 0) {
                                alert(data.msg);
                                window.location.href="category.html"
                            } else {
                                alert("删除失败!")
                            }
                        }
                    })
                    obj.del();
                    layer.close(index);
                })
            }
        });
    });
</script>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    修改商品类目信息
                </h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" id="form1">
                    <div class="form-group">
                        <label for="categoryId" class="col-sm-2 control-label">商品类目id:</label>
                        <div class="col-sm-10">
                            <input class="form-control" name="categoryId" id="categoryId" type="text" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="categoryName" class="col-sm-2 control-label">类目名字:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="categoryName" name="categoryName" placeholder="请输入类目名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="categoryType" class="col-sm-2 control-label">类目编号:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="categoryType" name="categoryType" placeholder="请输入类目编号">
                        </div>
                    </div>
<!--                    <div class="form-group">-->
<!--                        <label for="createTime" class="col-sm-2 control-label">创建日期:</label>-->
<!--                        <div class="col-sm-10">-->
<!--                            <input type="datetime-local" class="form-control" id="createTime" name="createTime" placeholder="请输入创建时间">-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="form-group">
                        <label for="updateTime" class="col-sm-2 control-label">更新日期:</label>
                        <div class="col-sm-10">
                            <input type="datetime-local" class="form-control" id="updateTime" name="updateTime" placeholder="请输入更新日期">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary" id="but">
                            提交更改
                        </button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit" data-toggle="modal" data-target="#myModal">更新</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    $("#but").click(function () {
        var categoryId = $("#categoryId").val()
        $.ajax({
            type: 'get',
            url:'meishipai/product-category/update',
            data:$("#form1").serialize(),
            dataType: 'json',
            success:function (date) {
                if (date.code == 0) {
                    alert(date.msg);
                    window.location.href="category.html"
                    /*window.parent.location.reload();*/
                } else {
                    alert("修改失败！")
                }
            }
        })
    })
</script>
</body>
</html>
